<template>
  <div class="function-allocation-manage flex-column">
    <div class="page-head action-bar flex-row-between flex-row-center">
      <div>团队名称 : {{ $g.session.data || "无" }}</div>
      <el-button type="primary" @click="setDesignCopy({})">功能拷贝</el-button>
    </div>
    <div class="page-body flex-row-between">
      <div class="function-default">
        <div class="title flex-row-between flex-row-center">功能列表</div>
        <div class="view">
          <div><el-input placeholder="请输入"></el-input></div>
          <br />
          <el-tree
            :data="data"
            :props="props"
            default-expand-all
            show-checkbox
            :expand-on-click-node="false"
            :height="208"
            @node-click="nodeClick"
          >
            <template #default="{ node, data }">
              <div class="tree-node flex-row-between flex-row-center">
                <span>{{ data.name }}</span>
                <el-button class v-if="node.level == 1" type="primary" size="small" round v-show="node.checked">
                  <!--  link -->
                  <el-space :size="2">
                    <Icon icon="plus" class="click"></Icon>
                    添加
                  </el-space>
                </el-button>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="function-custom flex-column">
        <div class="title flex-row-between flex-row-center">
          功能配置表
          <el-button type="primary" @click="setDesign({})">导航创建</el-button>
        </div>
        <Graph
          class="graph-view"
          :data="graphData"
          :config="{
            nodeHeight: 40,
            nodeWidth: 180,
            marginX: 60
          }"
        >
          <template #node="{ node, data }">
            <div
              class="node-item flex-row-between flex-row-center click"
              :id="'node' + node.id"
              :class="{
                ['level' + data.level || 0]: true,
                'node-active': data == active
              }"
              @click="setActive(data)"
            >
              <el-space>
                <!-- <Icon :icon="data.level > 2 ? 'Xiangmu' : 'Bumen'"></Icon> -->
                {{ data.name }}
              </el-space>
              <Icon icon="close" class="click remove"></Icon>
              <div class="node-item-expand click" v-if="node.children && node.children.length">
                <Icon v-if="node.children.length" icon="Minus"></Icon>
              </div>
            </div>
          </template>
        </Graph>
      </div>
      <div class="function-preview">
        <div class="title">功能预览</div>
        <div class="view">
          <div>数字状态(数字员工)</div>
          <el-button href="http://localhost:3001/" type="primary" link>http://localhost:3001</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      width="400px"
      :title="design && design.id ? '导航编辑' : '导航创建'"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :model-value="design ? true : false"
      @close="setDesign()"
    >
      <NavDesign v-if="design" :design="design" @close="setDesign()"></NavDesign>
    </el-dialog>
    <el-dialog
      width="400px"
      :title="'导航拷贝'"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :model-value="designCopy ? true : false"
      @close="setDesignCopy()"
    >
      <NavCopy v-if="designCopy" :designCopy="designCopy" @close="setDesignCopy()"></NavCopy>
    </el-dialog>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
import NavDesign from "./NavDesign.vue";
import NavCopy from "./NavCopy.vue";

export default {
  extends: BaseComponent,
  name: "FunctionAllocation",
  components: { NavCopy, NavDesign },
  data() {
    return {
      active: null,
      designCopy: null,
      design: null,
      props: {
        value: "value",
        label: "name",
        children: "children"
      }
    };
  },
  computed: {
    graphData() {
      return [
        {
          id: 1,
          level: 1,
          name: "a1"
        },
        {
          id: 2,
          pid: 1,
          level: 2,
          name: "a1-1"
        },
        {
          id: 3,
          pid: 1,
          level: 2,
          name: "a1-2"
        },
        {
          id: 4,
          pid: 1,
          level: 2,
          name: "a1-4"
        },
        {
          id: 5,
          pid: 3,
          level: 3,
          name: "a1-4"
        },
        {
          id: 7,
          pid: 3,
          level: 3,
          name: "a1-3"
        },
        {
          id: 6,
          pid: 5,
          level: 3,
          name: "a1-4"
        }
      ];
    },
    data() {
      return [
        {
          name: "数字员工",
          value: "数字员工",
          children: [{ name: "数字状态", value: "数字状态" }]
        },
        {
          name: "项目管控",
          value: "项目管控",
          children: [{ name: "项目信息", value: "项目信息" }]
        }
      ];
    }
  },
  created() {},
  setup() {},
  methods: {
    setActive(active) {
      this.active = active;
    },
    nodeClick(data, node) {
      console.log(node, data);
    },
    setDesignCopy(design) {
      this.designCopy = design;
    },
    setDesign(design) {
      this.design = design;
    },
    getData() {
      this.$g.ajax.$api("team.getList", this.query).then((result) => {
        console.log(result);
        this.result = result;
      });
    },
    remove(item) {
      this.$g.ajax.$api("team.remove", item).then((result) => {
        console.log(result);
      });
    }
  }
};
</script>
<style>
.tree-node {
  width: 100%;
}
.tree-node .el-button {
  padding: 2px 6px;
}
.function-allocation-manage {
  position: relative;
  overflow: auto;
  flex-grow: 1;
}
.title {
  padding: 10px;
  border-bottom: 1px solid #2f517e1f;
}
.view {
  padding: 10px;
}
.graph-view {
  overflow: auto;
  flex-grow: 1;
}
.function-custom {
  overflow: auto;
  flex-grow: 1;
  border: 1px solid #2f517e1f;
  border-top: none;
  border-bottom: none;
}
.node-item {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  --r: 8px;
  right: var(--r);
  overflow: visible;
  background-color: var(--el-color-primary);
  color: white;
  padding: 5px 10px;
  border-radius: var(--el-border-radius-base) var(--el-border-radius-base);
  box-sizing: border-box;
}
.node-item .remove {
  opacity: 0;
  transition: 0.3s;
}
.node-item:hover .remove {
  opacity: 1;
}
.level1 {
  inset: -7px var(--r) -7px 0;
  top: -7px;

  bottom: -7px;
  left: 0;
}
.level3 {
  background-color: var(--el-color-primary-light-5);
  background-color: #fff;
  border: 1px solid var(--el-color-primary);
  color: initial;
  /* padding-left: 2px; */
}
.node-item-expand {
  font-size: 0.5rem;
  position: absolute;
  top: 50%;
  right: calc(var(--r) * -2);
  margin-top: calc(var(--r) * -1);
  border-radius: 14px;
  height: calc(var(--r) * 2);
  width: calc(var(--r) * 2);
  /* background-color: aqua; */
  z-index: -1;
  border-radius: 100%;
  border: 1px solid #2a6dac;
  background-color: white;
  font-size: 12px;
  transform: scale(0.9);
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.function-default,
.function-preview {
  width: 300px;
}
</style>
